<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>诗歌本</title>
    <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=yes"/>
    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="../js/wxCloud.js?type=9"></script>
    <script src="../js/wxSDK.js?type=22"></script>
    <script src="../js/bootstrap-4.5.3-dist/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="../js/a3.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
    <link id="zhandianIcon" rel="shortcut icon" href="https://7372-srrz-2g24l1oea7a7e67e-1304952114.tcb.qcloud.la/icon/%E7%81%AF%E5%A1%94.png" >
    <style>
        body{

        }
        ul{
            padding:5px;
        }
        li{
            list-style: none;
        }
        a{
            color:black;
            font-size:19px;
        }
        .seacherBox{


        }
        .seacherBox img{
            height: 30px;width:30px;
        }
        .seacherBox label{

        }
        .seacherBox input{
            padding:0 5px;
            margin-left:3px;
        }
        nav{
            width:100%;
            position:fixed;
            background-color:#fff;
            padding:10px;
        }
        nav ul{
            transition:all 0.5s ease-in;
        }
        nav ul li {
            transition:all 0.5s ease-in;
        }

        main{
            width:100%;
            position: absolute;
            overflow:auto;
            left:0px;
            padding:10px;
            top:70px;
            height: calc(100% - 70px);
            padding-bottom:40px;
        }
        main ul li{
            border-bottom:1px solid rgba(0,0,0,0.4);
        }
        main ul li .shijiC{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid black;
            font-weight: bolder;
        }
        main ul li button{
            height: 40px;
            line-height: 40px;
            display: block;
            background-color:transparent;
            border:none;
            font-size:15px;
            width:100%;
            text-align:left;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }

        footer{
            width: 100%;
            position: fixed;
            background-color: #fff;
            padding: 5px 10px;
            bottom: 0px;
            left: 0px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            box-shadow: 1px 1px 9px rgb(0 0 0 / 40%);
        }
        footer audio{
            width:100%;
            height:40px;
        }
        .cleafix{
            display: inline-block;
        }
        .cleafix:after{
            content: '';
            display: block;
            clear:both;
            visibility: hidden ;
            height: 0 ;
        }

        @media (max-width:576px){
            nav{
                height: 60px;
            }
            nav h3{
                display: flex;
                justify-content:space-between;
            }
            nav h3 img{
                width:30px;height: 30px;
            }
            nav ul {

                transform:scaleY(0);
                opacity:0;
                transform-origin:top;
            }
        }

        @media (min-width:576px){
            nav ul {
                margin:0px;padding:0px;
                display: inline-block;
                transform:scaleX(1);
            }
            nav ul :after{
                content: '';
                display: block;
                clear:both;
                visibility: hidden ;
                height: 0 ;
            }
            nav ul li{
                float:left;
                padding:0 3px;
            }
            nav h3 img{
                display: none;
            }
            main{
                top:110px!important;
                height: calc(100% - 110px)!important;
            }
        }
        .transform{
            transition:all .5s ease-in-out;
        }
        .scaleX-1{
            transform:scaleX(1);
            opacity:1;
        }
        .scaleX-0{
            transform:scaleX(0);
        }
        .rotate-90{
            transform:rotate(90deg);
            transform-origin: center;
        }
        .listOpenMain-position{
            height: calc(100% - 230px);
            top:230px;
        }
    </style>
</head>
<body x-data="sgb()" x-init="init()">

    <nav>
        <h3>
            <span>导航</span>
            <img class="transform" id="listIcon" tabindex="0" src="../img/list.png" alt="这是一个列表展开和关闭的按钮，点击打开导航列表">
        </h3>
        <ul id="navUl" class="transform">
            <li><a href="#sj0">赞美耶稣诗集(附录)</a></li>
            <li><a href="#sj1">赞美耶稣诗集</a></li>
            <li> <a href="#sj2">新编赞美诗</a></li>
            <li><a href="#sj3">少儿赞美</a></li>
            <li class="seacherBox">
                <label for="seacher">搜索：</label>
                <input id="seacher" x-ref="seacher" placeholder="请输入诗集名称或序号" @input.debounce="seacher($event.target.value)"/>
                <template x-if="resetIsShow">
                    <button @click.debounce="$refs.seacher.value='';seacher('')">返回</button>
                </template>
                <span x-text="seacherRes" tabindex="0" @keydown.enter="alert(seacherRes)" @click="alert(seacherRes)"></span>
            </li>
        </ul>
    </nav>
    <main class="transform">
        <template x-if="data.length>0">
            <ul>
                <template x-for="(item,index) in data" :key="item">
                    <li :id="item._id">
                        <template x-if="item.shijiIndex>0 && item.shijiIndex !== data[index-1<0?0:index-1].shijiIndex || index==0">
                            <h5 class="shijiC" :id="'sj'+item.shijiIndex"  x-text="navs[item.shijiIndex]">Some Element</h5>
                        </template>
                        <button :x-ref="item._id"  x-text="'第'+item.xuhao+'首 '+item.mulu" @click="play(item.xuhao+item.mulu,$refs[item._id])"></button>
                    </li>
                </template>
            </ul>
        </template>
    </main>
    <footer>
         <span>237&nbsp&nbsp医治&nbsp&nbsp顶峰</span>
    </footer>
</body>
</html>
<script>
setTimeout(()=>{

    wxSDK().then(res=>{

        SDKyanzheng(res.data).then(res=> {

            let title = document.title
            let url = location.href
            let imgUrl = $('#zhandianIcon').attr('href')
            let desc = '我的24 现场24 CH24'
            fenxiang(title, url, imgUrl, desc)
        })
    }).catch(err=>{
        console.log("验证登陆失败",err);
    })


},1000)


    function sgb(){
        return {
            data:[],
            seacherRes:'',
            resetIsShow:false,
            audio:document.createElement('audio'),
            host:'http://od.qumei.com/sgb/dmt/ad/',
            navs:[
                '赞美耶稣诗集(附录)',
                '赞美耶稣诗集',
                '新编赞美诗',
                '少儿赞美',
            ],
            init(){

                let zmitem = localStorage.getItem('zmitem')
                if(zmitem){
                    let items = JSON.parse(zmitem)
                    this.data = items
                    // this.audio.src = this.host+jm(this.data[0]['xuhao']+this.data[0]['mulu'])+'.mp3'
                    this.seacherRes = '共包含：'+this.data.length+'首'

                }else{
                    wxCloud.getzanmeiitem((res)=>{
                        this.data = res
                        localStorage.setItem('zmitem',JSON.stringify(res))
                        // this.audio.src = this.host+jm(this.data[0]['xuhao']+this.data[0]['mulu'])+'.mp3'
                        this.seacherRes = '供包含：'+this.data.length+'首'
                    })
                }

                this.audio.onerror = function (){
                    alert('当前赞美没有音频')
                    this.removeAttribute('controls')
                }
                this.audio.onended = function (){
                    this.play()
                }
                this.audio.onplay = function (){
                    if(!this.getAttribute('controls')){
                        this.setAttribute('controls','1')
                    }
                }

            },
            play(mulu,ref){

                let src = this.host+jm(mulu)+'.mp3';

                if(src !== this.audio.src){
                    this.audio.src = src
                    setTimeout(()=>{
                        this.audio.play()
                    },200)

                    ref.insertAdjacentElement('afterend',this.audio)
                    this.audio.focus()
                }else{
                    if(!this.audio.paused){
                        this.audio.pause()
                    }else{
                        this.audio.play()
                    }
                }

            },
            seacher(val){
                let data = JSON.parse(localStorage.getItem('zmitem'))
                let list = data.filter(i=>(i.xuhao+i.mulu).indexOf(val)!==-1)
                if(list.length<1){
                    this.data=[]
                }else{
                    this.data = list
                }
                this.seacherRes = '共包含：'+list.length+'首'
                if(val.length>0){
                    this.resetIsShow=true
                }else{
                    this.resetIsShow=false
                }
            }
        }
    }

    document.getElementById('listIcon').onkeydown = function (e){
        if(e.keyCode==13){
            listToggle()

        }
    }
    document.querySelector('#listIcon').onclick = function (e){
        listToggle()
    }

    function listToggle(){
        document.querySelector('#navUl').classList.toggle('scaleX-1')
        document.querySelector('#listIcon').classList.toggle('rotate-90')
        document.querySelector('main').classList.toggle('listOpenMain-position')
    }
</script>
